<script setup>
import { ref } from 'vue';

const list = ref([
  { label: '种植计划', value: 0, color: '#0062FF' },
  { label: '未开始', value: 0, color: '#6B7A8B' },
  { label: '进行中', value: 0, color: '#35D5EE' },
  { label: '已完成', value: 0, color: '#8CA1C3' },
])
</script>

<template>
  <div class="com-full cd">
    <div class="item" v-for="(item, i) of list" :key="i" :style="{ '--c': item.color }">
      <div class="label">{{ item.label }}</div>
      <div class="value">
        {{ item.value }}
        <span class="unit">个</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.cd {
  display: flex;
  align-items: center;

  .item {
    flex: 1;
    overflow: hidden;
    height: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;

    .label {
      width: 80%;
      font-size: 14px;
      color: #333333;
      line-height: 20px;
      font-weight: bold;

      &::before {
        content: "·";
        display: inline-block;
        margin: 0 3px 0 10px;
      }
    }

    .value {
      width: 80%;
      color: var(--c);
      font-size: 50px;

      .unit {
        font-size: 14px;
        color: #969799;
      }
    }
  }

  .item:not(:last-child) {
    border-right: 1px solid #EBF0F7;
  }
}
</style>